<template>
    <div class="search-box">
        <div class="row_tow">
            <div class="left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button @click="addProductAttr">添加</el-button>
            </div>
        </div>
    </div>
    <el-table :data="list" border table-layout="auto" cell-class-name="align-c"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" width="100" />
        <el-table-column label="属性名称" prop="name" width="200" />
        <el-table-column label="商品类型" width="200">
            <template #default="{ row }">
                <span>{{ form.cname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="属性是否可选" width="140">
            <template #default="{ row }">
                <span>{{ row.selectType === 0 ? '唯一' : (row.selectType === 1 ? '单选' : '复选') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="属性值的录入方式" width="160">
            <template #default="{ row }">
                <span>{{ row.handAddStatus === 0 ? '手工录入' : '从列表中选取' }}</span>
            </template>
        </el-table-column>

        <el-table-column label="可选值列表" prop="inputList" width="200" />
        <el-table-column label="排序" prop="sort" />


        <el-table-column label="操作" width="180">
            <template #default="{ row }">
                <el-button v-permission="'updateProductAttr'" @click="editProductAttr(row.id)">编辑</el-button>
                <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 选择框 -->
    <div class="left">
        <el-select placeholder="批量操作" v-model="select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select>
        <el-button type="primary" style="margin-left: 10px;" @click="batchdel">确定</el-button>
    </div>
    <!-- 分页器 -->
    <el-config-provider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </div>
    </el-config-provider>
</template>

<script setup lang="ts">
import { Tickets } from "@element-plus/icons-vue";
import { reactive, ref } from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import useTable from '@/hooks/useTable';
import { AttributeListApi, delProductAttributeApi } from './api';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
interface User {
    id: number
}

const router = useRouter()
// 选择框选中数据
const select = ref()
//选择框数据
const options = ref([{
    label: "删除",
    value: 0,
}])
const multipleSelection = ref<number[]>([])
const handleSelectionChange = (val: User[]) => {
    console.log(val);
    multipleSelection.value = val.map(item => item.id)
}

const form = reactive({
    cid: parseInt(router.currentRoute.value.query.cid as string),
    cname: router.currentRoute.value.query.cname,
    type: parseInt(router.currentRoute.value.query.type as string),
})


    let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(AttributeListApi, form)


console.log(list);
// 点击添加
const addProductAttr = () => {
    router.push(`/pms/updateProductAttr?cid=${form.cid}&type=${form.type}`)
}
// 点击删除
const del = (id: number) => {
    multipleSelection.value = [id]
    wholedel()
}

// 点击编辑
const editProductAttr = (id: number) => {
    router.push(`/pms/updateProductAttr?id=${id}`)
}

const wholedel = () => {
    ElMessageBox.confirm('确定要删除选中的商品属性吗', '删除商品属性', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        delProductAttributeApi(multipleSelection.value).then((res) => {
            ElMessage.success('删除成功')
            ListFn()
        }).catch(() => {
            ElMessage.error('删除失败,请重新操作')

        })
    }).catch(() => {
        ElMessage.success('已经取消删除')

    })
}

// 点击批量删除
const batchdel = () => {
    if (select.value == 0) {
        // 全部删除函数
        wholedel()
    }
}

</script>

<style scoped lang="less">
:deep(.align-c),
:deep(.cell) {
    text-align: center;
}

.search-box {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;

    .row {
        padding: 0 0 20px 0;
        display: flex;
        align-items: center;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            div {
                display: flex;
                width: 400px;
                margin-bottom: 10px;

                span {
                    width: 100px;
                }
            }
        }
    }

    .left {

        span {
            margin-left: 10px;
        }

    }

    .row_tow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.left {
    margin: 20px 0;
    height: 20px;
    float: left;
}

.page {
    margin: 20px 0;
    height: 20px;

    :deep(.el-pagination) {
        float: right;

    }
}
</style>